﻿@model IEnumerable<Dqaqs.Data.DataSource>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "New")
</p>
<table>
    <tr>
        <th width="350px">
            Title
        </th>
        <th width="350px">
            Schema
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            <div id="ds-@item.Id"> Loading ... </div>
        </td>
        <td>
            @Html.ActionLink("Upload Data", "UploadData", new { id = item.Id }) |
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Index", new { id = item.Id} , new { onclick="confirmDeletion('" + item.Id + "'); return false;" })
        </td>
    </tr>
}

</table>
&nbsp;

<div id="delete-confirmation" style="visibility:hidden">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered.</p>
<p>All data and table associated with this data source will be deleted as well. Are you sure you want to proceed?</p>
</div>

<script language="javascript" type="text/javascript">
    function confirmDeletion(id) {
        $("#delete-confirmation").css("visibility", "visible");
        $("#delete-confirmation").dialog(
        {
            width: 400,
            height: 250,
            modal: true,
            title: "Warning",
            resizable: false,
            buttons: {
                "Delete": function () { window.location.href = "Delete/" + id; $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            }
        }
        );
    }
    $(function () {
        $("input:submit, a, button", ".demo").button();
        $("a", ".demo").click(function () { return false; });
        $("div[id|='ds']").attr("id", function (i, al) { var dsId = al.split("-")[1]; loadSchema(dsId, al); })
    });

    function loadSchema(dsId, targetId) {
        $.getJSON("GetSchema/" + dsId, function (data) {
            var html = "<i>No schema objects</i>";
            if (data.Tables != undefined) {
                var html = "<ul>"
                $.each(data.Tables, function (i, tbl) {
                    html += "<li>" + tbl.Name + "<ul>";
                    $.each(tbl.Columns, function (i, col) {
                        html += "<li>" + col.Name + "</li>";
                    });
                    html += "</ul></li>";
                });
            }
            $("#" + targetId).html(html);
        });
    }
</script>